<script>
    import {onMount} from "svelte";
    import SaveManager from "../../scripts/save/SaveManager.js";
    import MapManager from "../../scripts/maps/MapManager.js";
    import action from "../../scripts/character/action.js";
    import CharacterCard from "../character/CharacterCard.svelte";
    import ResourceCard from "../resource/ResourceCard.svelte";
    import Remilia from "../../scripts/character/instance/Remilia.js";
    import {mapEventBus} from "../../eventbus/map_signal.js";
    import BuildCard from "../building/BuildCard.svelte";

    export let point_position;
    $: if(point_position){
        show_flag = true
    }
    mapEventBus.on("map-reload", (id = Math.random(), event = () => {
    }) => {
        mapManager = new MapManager(window)
        map_data = mapManager.map_data
    });

    let map_data;
    let saveManager
    let mapManager
    onMount(() => {

        saveManager = new SaveManager(window);
        mapManager = new MapManager(window)
        map_data = mapManager.map_data
    })
    $: point_data = () => {

        if (map_data) {
            return map_data[point_position.row][point_position.col]
        } else {
            return null
        }
    }
    $: get_character = () => {
        let ret = point_data()
        if (ret || ret.character) {
            return action.init(ret.character)
        }
    }

    $: get_resource = () => {
        let ret = point_data()
        if (ret || ret.resource) {
            return ret.resource
        }
    }

    $: get_builder = () => {
        let ret = point_data()
        if (ret || ret.building) {
            return ret.building
        }
    }

    $: position = () => {
        if (!saveManager) {
            return
        }
        let total_row = saveManager.mapsize
        // console.log(point_position + 10)
        if (point_position.row + 10 > total_row) {
            // 在最后十行
            return `top: 0px; left: 0;background-image: linear-gradient(to bottom, yellow, #e6e6e600);`
        } else {
            return `bottom: 0px;left: 0;background-image: linear-gradient(to top, yellow, #e6e6e600); `

        }
    }
    $: position2 = function (){
        if (!saveManager) {
            return
        }
        let total_row = saveManager.mapsize
        // console.log(point_position + 10)
        if (point_position.row + 10 > total_row) {
            // 在最后十行
            return `top: 20px`
        } else {
            return `top: -20px`
        }
    }


    export let show_flag = false
</script>
{#if !!(show_flag && (point_position && map_data))}
    <div class="details" style="{position()}" on:click={()=>{show_flag=false}}>
        {#if point_position && map_data}

            <div class="details-card" on:click|stopPropagation style="{position2()}">

                {#if point_data().character !== null}
                    <CharacterCard {get_character}/>
                {/if}
                {#if point_data().resource !== null}
                    <ResourceCard resource={get_resource()}/>
                {/if}

                {#if point_data().building !== null}
                    <BuildCard building="{get_builder()}" />
                {/if}
            </div>
        {/if}
    </div>
{/if}



<style lang="less">
  .details {
    background-image: linear-gradient(to bottom, #7daee0, #e6e6e600);
    position: fixed;
    width: 100vw;
    display: flex;
    z-index: 199;
    justify-content: center;
    align-items: center;
    gap: 25px;
  }
.details-card{
  position: relative;

}
</style>
